<!-- 旅行社员工列表 -->
<template>
    <div class="travel-staff-list">
        <div ref="dgtools" class="filter-container">
            <el-form :model="dg.ps" :inline="true" @keyup.enter.native="getDgList">
                <el-form-item>
                    <el-input
                        style="width: 200px"
                        placeholder="联系人/电话（支持模糊查询）"
                        v-model="dg.ps.find">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-select
                        v-model="dg.ps.staffState"
                        placeholder="在职状态"
                        style="width: 100px"
                        clearable>
                        <el-option label="正式" value="NORMAL"></el-option>
                        <el-option label="试用" value="TRY"></el-option>
                        <el-option label="离职" value="LEAVE"></el-option>
                    </el-select>
                </el-form-item>
                
                <!-- <el-form-item>
                    <el-input
                        style="width: 140px"
                        placeholder="用车单位名称"
                        v-model="dg.ps.unitName">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-input
                        style="width: 140px"
                        placeholder="业务员"
                        v-model="dg.ps.serviceMan">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-input
                        style="width: 140px"
                        placeholder="推荐人"
                        v-model="dg.ps.recomMan">
                    </el-input>
                </el-form-item> -->

                <el-button type="primary" icon="el-icon-search" @click="getDgList">搜索</el-button>
                <el-button type="primary" icon="el-icon-edit-outline" @click="setAdupStaffMd({state: true})">新增/修改</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="delStaff">删除</el-button>
                <el-button type="primary" icon="el-icon-close" @click="setLeaveOfficeMd({state: true})">离职处理</el-button>
                <el-button type="primary" icon="el-icon-setting" @click="setServiceMan">设置业务员</el-button>
            </el-form>

            <TableSelfSet 
                v-if="dg.columns.length > 0" 
                :tbTitle="'员工列表'" 
                :dgName="dg.dgName" 
                :tbId="dg.tbName" 
                :srcCols="dg.srcCols" 
                :columns="dg.columns" 
                @saveSet="saveTbSet"
            />
        </div>
        <el-table
            :ref="dg.tbName"
            :data="dg.list"
            row-key="id"
            :height="bodyHeight"
            border fit 
            :row-class-name="rowClassName"
            @header-dragend="dragHeader"
            @selection-change="selRowChange">
            <el-table-column fixed="left" type="index" label="编号" width="40" align="center"></el-table-column>
            <el-table-column fixed="left" type="selection" width="40" align="center"></el-table-column>
            <el-table-column 
                v-for="(col, index) in dg.columns" 
                :key="index"
                :class-name="dg.dgName"
                :prop="col.field"
                :label="col.label"
                :width="col.width">
                <template slot-scope="{row}">
                    <template v-if="col.field == 'status'">
                        <span>{{row.status.label}}</span>
                    </template>

                    <template v-else-if="col.field == 'staffState'">
                        <span v-if="row.staffState == 'NORMAL'" class="c-blue">正式</span>
                        <span v-else-if="row.staffState == 'TRY'" class="c-yellow">试用</span>
                        <span v-else-if="row.staffState == 'LEAVE'" class="c-ccc" :title="row.leaveInfo ? '原因：'+row.leaveInfo : ''">离职</span>
                        <span v-else>其他</span>
                    </template>

                    <template v-else-if="col.field == 'isServiceMan'">
                        <span v-if="row.isServiceMan == 1" class="c-blue">是业务员</span>
                        <span v-else class="c-bbb">否</span>
                    </template>

                    <template v-else-if="col.field == 'idCardUrl'">
                        <div class="flex" v-if="row.idCardUrl">
                            <el-image  
                                class="list-row-img"
                                alt=""
                                title="点击查看大图"
                                v-for="(img, i) in row.idCardUrl.split(',')"
                                :key="i"
                                :src="img" 
                                :preview-src-list="[img]">
                                <div slot="error">
                                    <i class="el-icon-picture-outline fs-18"></i>
                                </div>
                            </el-image>
                        </div>
                        <span v-else class="c-ccc">未设置</span>
                    </template>
                    
                    <template v-else-if="col.field == 'lookBtlBalance'">
                        <span v-if="row.lookBtlBalance == 1" class="c-green">可以查看</span>
                        <span v-else class="c-bbb">不能查看</span>
                    </template>

                    <template v-else-if="col.field == 'education'">
                        <div v-if="row.education">
                            <span v-for="it in educationList" :key="it.value">
                                <b v-if="row.education == it.value">{{it.label}}</b>
                                <b v-else></b>
                            </span>
                        </div>
                        <span v-else class="c-ccc">未设置</span>
                    </template>

                    <span v-else-if="col.field == 'addTime'">{{row.addTime.substr(0, 16)}}</span>

                    <template v-else>{{ getColVal(row, col.field) }}</template>
                </template>
            </el-table-column>
        </el-table>
        <Pagination v-show="dg.total > 0" 
            :total="dg.total" 
            :page.sync="dg.ps.page" 
            :limit.sync="dg.ps.rows" 
            @pagination="getDgList"
        />

        <TravelAdupStaff 
            v-if="adupStaffMd.state"
            :myData="adupStaffMd" 
            @myClick="setAdupStaffMd" 
            @reloadDg="getDgList"
        />

        <LeaveOfficeType
            v-if="leaveOfficeMd.state"
            :id="staff.id"
            @myClick="setLeaveOfficeMd"
            @reloadDg="getDgList"
        />
            
    </div>
</template>

<script>
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';
import elDragDialog from '@/directive/el-drag-dialog';
import TableSelfSet from '@/components/TableSelfSet';
import Pagination from '@/components/Pagination';

import TravelAdupStaff from '../adup-staff';
import LeaveOfficeType from '@/views/person-man/staff-list/leave-office-type';

import * as personManSer from '@/api/services/travel/person.man.service';

export default {
    name: 'TravelStaffList',
    mixins: [ DataGridBase, DataGridResize],
    directives: { elDragDialog },
    components:{ TableSelfSet, Pagination, TravelAdupStaff, LeaveOfficeType },
    data() { 
        let cols = [
            { label: "姓名", field: "baseUserId.realName", width: 80 },
            { label: "电话", field: "baseUserId.phone", width: 90 },
            { label: "入职状态", field: "staffState", width: 70 },
            { label: "是否业务员", field: "isServiceMan", width: 80 },
            { label: "身份证(正反)", field: "idCardUrl", width: 90 },
            { label: "入职公司", field: "entryCompany.companyName", width: 180 },
            { label: "入职时间", field: "entryTime", width: "auto" },
            { label: "合同到期时间", field: "expireTime", width: 90 },
            { label: "所属部门", field: "deptId.name", width: 70 },
            { label: "角色/职务", field: "roleId.name", width: 70 },
            { label: "添加时间", field: "addTime", width: 130 },
            { label: "学历", field: "education", width: 60 },
            { label: "是否查看银行账余额", field: "lookBtlBalance", width: 140 },
            { label: "其他备注", field: "otherNote", width: 140 },
        ];

        return {
            // 选中的员工
            staff: null,

            dg: {// 数据列表参数
                dgName: 'dg',
                tbName: 'travelStaffListTb',
                total: 0,
                list: [],
                srcCols: cols,
                columns: [],
                selRows: [],
                ps: { // 过滤参数
                    page: 1, rows: 20,
                    // 关键字查询（姓名/电话）
                    find: '',
                    // 在职状态
                    staffState: '',
                },
            },
            // 学历列表
            educationList: [
                {label: '小学', value: 'PRIMARYSCHOOL'},
                {label: '初中', value: 'JUNIORSCHOOL'},
                {label: '高中', value: 'HIGHSCHOOL'},
                {label: '专科', value: 'COLLEGEDEGREE'},
                {label: '本科', value: 'BACHELOR'},
                {label: '硕士', value: 'MASTER'},
                {label: '博士', value: 'DOCTOR'},
            ],
            // 添加/修改-员工-弹框
            adupStaffMd: {state: false},
            // 离职处理-弹框
            leaveOfficeMd: {state: false},
        }
    },
    created() {
        const that = this;

        that.initTbSetData(that.dg.dgName);

        that.getDgList();
    },
    methods:{
        /** 获取-列表数据 */
        getDgList(){
            const that = this, ps = that.U.scopy(that.dg.ps);

            personManSer.getStaffList(ps).then(res => {
                if(res.code == 1){
                    let list = res.data;

                    list.forEach(it => { it.dgName = that.dg.dgName; });
                
                    that.dg.list = list;
                    that.dg.total = res.count;
                }
            });
        },

        /** 打开/关闭-添加/修改员工-弹框 */
        setAdupStaffMd(e){
            const that = this, U = that.U, rows = that.getSeledRows();
            
            if(!e.state){
                that.adupStaffMd = { state: false };
            }else{
                if(rows.length > 1){
                    U.qerror(`只能选择一条数据`);
                }else if(rows.length == 1){
                    let row = rows[0];
                    that.adupStaffMd = { state: true, obj: row };
                }else{
                    that.adupStaffMd = { state: true };
                }
            }
        },
        // 员工离职
        setLeaveOfficeMd(e) {
            const that = this, U = that.U, rows = that.getSeledRows();

            if(!e.state){
                that.leaveOfficeMd.state = false;
            }else{
                if(rows.length != 1){
                    U.qerror(`${rows.length == 0 ? '请' : '只能'}选择一条数据`);
                }else{
                    let row = rows[0];
                    if(row.staffState == 'LEAVE'){
                        U.qerror('此员工已离职，请重新选择');
                    }else{
                        that.staff = row;
                        that.leaveOfficeMd.state = true;
                    }
                }
            }
        },
        /** 删除-员工 */
        delStaff(){
            const that = this, U = that.U, rows = that.getSeledRows();

            if(rows.length !== 1){
                U.qerror('请选择一条数据');
            }else{
                let row = rows[0];
                U.qconfim(`确认删除员工【${row.baseUserId.realName}-${row.baseUserId.phone}】吗？`).then(r => {
                    if(r){
                        personManSer.delStaff({id: row.id }).then(res => {
                            if(res.code !== 1){
                                U.qerror(res.msg);
                            }else{
                                U.qsuccess(res.msg);

                                // 刷新列表
                                this.getDgList();
                            }
                        });
                    }
                });
            }
        },
        // 设置-员工为业务员
        setServiceMan(){
            const that = this, U = that.U, rows = that.getSeledRows();

            if(rows.length !== 1){
                U.qerror('请选择一条数据');
            }else{
                let row = rows[0];
                let isServiceMan = row.isServiceMan;
                let ps = {id: row.id, setVal: isServiceMan == 0 ? 1 : 0};
                U.qconfim(`确认将所选员工${ps.setVal == 1 ? '<b class="c-red">设置成业务员</b>' : '<b class="c-red">取消业务员</b>'}吗？`).then(r => {
                    if(r){
                        personManSer.setServiceMan(ps).then(res => {
                            if(res.code !== 1){
                                U.qerror(res.msg);
                            }else{
                                U.qsuccess(res.msg);

                                // 刷新列表
                                this.getDgList();
                            }
                        });
                    }
                });
            }
        },

        
    },
 }
</script>